<template>
	<view style="width: 750upx;" v-show="load">
		<view class="content">
			<view style="position: relative;">
				<swiper :autoplay="autoplay" @change="getBannerIndex">
					<swiper-item v-for="(item,index) in product.bannerImages" :key="index">
						<image class="banner" :src="item" mode="aspectFill" @tap="showBanner(index)" lazy-load></image>
					</swiper-item>
				</swiper>
				<view class="banner_num">
					{{bannerIndex}}
				</view>
			</view>
			<view class="pro_head">
				<view class="pro_head_1">
					<view class="pro_head_2 text_two">{{product.name}}</view>
					<view class="pro_head_3">
						<image src="../../static/icon/fx.png" class="icon"></image>
						<view class="text">分享</view>
						<button open-type="share" class="kf"></button>
					</view>
				</view>
				<view class="pro_head_4">
					<text class="text2">原价￥{{product.marketPrice}}</text>
					<view class="text3">
						￥
						<view style="font-weight: 700;font-size: 35upx;">
							{{product.price}}
						</view>
					</view>
				</view>
				<view class="pro_head_5">
					<text style="color: #555555;font-size: 24upx;">销量&nbsp;&nbsp;{{product.saleNum}} </text>
					<text style="color: #555555;font-size: 24upx;">库存&nbsp;&nbsp;{{product.stock}}</text>
				</view>
			</view>
			<view class="pro_head_6" @tap="skuShow(0)">
				<view>
					<view style="color: #888888;font-size: 28upx;">选择</view>
					<view style="margin-left: 30upx;color: #333333;width: 400upx;font-size: 28upx;" class="text_one">{{skuIntro}}</view>
				</view>
				<uni-icon type="arrowright" color="#333333" size="20"></uni-icon>
			</view>
			<view class="pro_head_6" @tap="paramVisiable=true">
				<view>
					<view style="color: #888888;font-size: 28upx;">参数</view>
					<view style="margin-left: 30upx;color: #333333;width: 400upx;font-size: 28upx;" class="text_one">{{paramIntro}}</view>
				</view>
				<uni-icon type="arrowright" color="#333333" size="20"></uni-icon>
			</view>
			<!-- 评价 -->
			<view class="comment-view">
				<view style="justify-content: space-between;">
					<view>
						<view style="color: #333333;font-size: 32upx;">评价</view>
						<view style="color: #333333;margin-left: 20upx;">( {{comment.all}} )</view>
					</view>
					<view style="align-items: center;" @tap="goComment()">
						<view style="color: #333333;font-size: 32upx;">好评<view style="color: #FE0036;margin-left: 15upx;">{{comment.rate}}</view>
						</view>
						<uni-icon type="arrowright" color="#333333" size="20"></uni-icon>
					</view>
				</view>
				<view style="flex-direction: column;margin-top: 10upx;" v-if="comment.all!=0">
					<view style="align-items: center;">
						<image :src="comment.avatar" style="width: 60upx;height: 60upx;border-radius: 60upx;"></image>
						<view style="color: #555555;margin-top: 10upx;margin-left: 20upx;">{{comment.nickname}}</view>
					</view>
					<view style="flex-direction: column;margin-left: 80upx;">
						<view style="color: #555555;margin-top: 10upx;line-height: 40upx;">
							{{comment.content}}
						</view>
						<image @tap="preview(comment.image)" :src="comment.image" style="width: 300upx;height: 300upx;margin-top: 10upx;" mode="aspectFill" v-if="comment.image!=''"></image>
						<view style="color: #888888;font-size: 24upx;margin-top: 10upx;">
							{{comment.createTime}}
							<view style="margin-left: 30upx;width:300upx ;" class="text_one">
								{{comment.skuName}}
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="pro_head_9">
				<view class="text4" style="margin-left: 20upx;">商品详情</view>
				<rich-text :nodes="detail" style="width: 750upx;"></rich-text>
			</view>

		</view>

		<!-- 参数 -->
		<view class="mask" v-show="paramVisiable" catchtouchmove="false" @tap="paramVisiable=false"></view>
		<view :class="paramVisiable?'product_param_view_':'product_param_view'" catchtouchmove="false">
			<view class="center product_param_title">
				产品参数
			</view>
			<scroll-view scroll-y style="height: 800upx;">
				<view v-for="(item,index) in product.productParams" :key="index" class="product_param_item">
					<view class="text_one product_param_name">{{item.param}}</view>
					<view class="text_one product_param_value">{{item.value}}</view>
				</view>
			</scroll-view>
			<view class="product_param_sure_button center" @tap="paramVisiable=false">完成</view>
		</view>

		<!-- 购物栏 -->
		<view class="pro_buttom">
			<view class="pro_buttom_1" @tap="goHome()">
				<image src="../../static/icon/ddd.png" style="width: 50upx;height: 50upx;">
				</image>
				<text style="color:#333333;font-size: 24upx;">首页</text>
			</view>
			<view class="pro_buttom_1" style="position: relative;" @tap="goCart()">
				<image src="../../static/icon/cart.png" style="width: 50upx;height: 50upx;">
					<view class="label">{{cartCount}}</view>
				</image>
				<text style="color: #333333;font-size: 24upx;">购物车</text>
			</view>
			<view style="height: 100%;width: 70%;align-items: flex-end;justify-content: center;background-color: #FFFFFF;">
				<view class="pro_buttom_2" @tap="skuShow(1)">加入购物车</view>
				<view class="pro_buttom_3" @tap="skuShow(2)">立即购买</view>
			</view>
		</view>

		<!-- 规格栏 -->
		<view class="mask" v-show="visiable" catchtouchmove="false" @tap="skuHidden()"></view>
		<view :class="[!visiable?'sku_view':'sku_view_']" catchtouchmove="false">
			<view class="sku_view_2">
				<uni-icon type="closeempty" color="#888888" size="40" @tap="skuHidden()"></uni-icon>
			</view>
			<view class="sku_view_3">
				<view class="sku_view_1">
					<image :src="attrImage" style="width: 200upx;height: 200upx;"></image>
				</view>
				<view style="flex-direction: column;margin-left: 30upx;margin-top: 20upx;">
					<view class="sku_view_3_1" style="flex-direction: column;">
						<text style="color: #FE0036;font-weight: 700;font-size: 35upx;">￥{{attrPrice}}</text>
					</view>
					<view style="margin-top: 10upx;">
						<text style="color:#808080;font-size: 24upx;">库存{{attrStock}}</text>
					</view>
					<view style="margin-top: 20upx;">
						<text style="color:#333333;width: 400upx;font-size: 24upx;">{{cName}}</text>
					</view>
				</view>
			</view>
			<view style="margin-top: 30upx;background-color: #F2F3F5;height: 1px;"></view>
			<scroll-view scroll-y style="height: 650upx;">
				<view style="flex-direction: column;">
					<view style="flex-direction: column;margin-top: 30upx;" v-for="(item,index) in product.attributes" :key="index">
						<view style="color: #333333;">{{item.name}}</view>
						<view style="margin-left: 30upx;flex-wrap: wrap;margin-top: 30upx;">
							<view v-for="(item2,index2) in item.values" @tap="choice(index,index2)" :class="[item.active==index2?'sku_view_4_value_':'sku_view_4_value']"
							 :key="index2">
								{{item2.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="number_box_view">
					<view style="color: #333333;">购买数量</view>
					<uni-number-box min="1" max="100" @getValue="getNumber"></uni-number-box>
				</view>
			</scroll-view>
			<view class="sku_sure">
				<view @tap="sure()" class="sku_sure_1">
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import uniNumberBox from '../../components/uni-number-box.vue';
	import api from '../../common/api.js';
	import parseHtml from '../../common/parseHtml.js';
	import {
		getWithParam,
		get,
		get_,
		getWithParam_
	} from '../../common/request.js';
	export default {
		data() {
			return {
				comment: {},
				load: false,
				skuIntro: '',
				paramIntro: '',
				bannerIndex: 0,
				type: 0,
				cartCount: 0,
				skuId: 0,
				count: 1,
				visiable: false,
				paramVisiable: false,
				productId: 0,
				product: {},
				autoplay: true,
				detail: [],
				top: 0,
				attrPrice: 0,
				attrMarketPrice: 0,
				attrStock: 0,
				attrImage: "",
				cName: "",
			}
		},
		components: {
			uniIcon,
			uniNumberBox
		},
		onLoad(option) {
			this.productId = option.id
			this.getDetail()
		},
		methods: {
			preview(url){
				var arr=[]
				arr.push(url)
				uni.previewImage({
					urls:arr
				})
			},
			goComment(){
				uni.navigateTo({
					url:"./commentList?id="+this.productId
				})
			},
			showBanner(e) {
				uni.previewImage({
					urls: this.product.bannerImages,
					current: e
				})
			},
			/**
			 * 获取当前banner
			 * @param {Object} e
			 */
			getBannerIndex(e) {
				var index = e.detail.current + 1;
				var total = this.product.bannerImages.length

				this.bannerIndex = index + "/" + total

			},
			goHome() {
				uni.switchTab({
					url: "../home/index"
				})
			},
			/**
			 * 跳转购物车
			 */
			goCart() {
				uni.switchTab({
					url: "../cart/index"
				})
			},
			/**
			 * 获取数量
			 */
			getCount() {
				get(api.CART_COUNT).then(res => {
					this.cartCount = res.data
				})
			},
			sure() {
				//没有全部选完
				if (this.isAllChoise() != -1) {
					uni.showToast({
						icon: "none",
						title: this.cName
					})
				} else {
					//判断选中的商品是否可用
					let f = this.getSku()
					if (f == 1) {
						uni.showToast({
							icon: "none",
							title: "商品不存在"
						})
					} else if (f == 2) {
						uni.showToast({
							icon: "none",
							title: "商品无库存"
						})
					} else {
						//添加购物车
						if (this.type == 1) {
							getWithParam(api.CART_ADD, {
								skuId: this.skuId,
								count: this.count
							}).then(res => {
								uni.showToast({
									icon: "none",
									title: "在购物车等您哦"
								})
								this.getCount()
								this.visiable = false
							})
						}
						//立即购买
						if (this.type == 2) {
							uni.navigateTo({
								url: "../order/index?skuId=" + this.skuId + "&count=" + this.count
							})
						}
					}
				}

			},
			/**
			 * 获取规格相应的价格
			 * 1 没有该条数据
			 * 2 无库存
			 * 3 正常
			 */
			getSku() {
				let s = this.product.attributes;
				let result = ''
				for (var i = 0; i < s.length; i++) {
					result += s[i].values[s[i].active].id + "-"
				}
				result = result.substring(0, result.length - 1)
				let sku = this.product.productSku
				for (var i = 0; i < sku.length; i++) {
					if (sku[i].attributeIds == result) {
						this.attrMarketPrice = sku[i].marketPrice
						this.attrPrice = sku[i].price
						this.attrStock = sku[i].stock
						if (this.attrStock == 0) {
							return 2
						} else {
							this.skuId = sku[i].id
							return 3
						}

					}
				}
				this.attrMarketPrice = 0.00
				this.attrPrice = 0.00
				this.attrStock = 0
				return 1
			},
			/**
			 * 获取选择的SKU名称
			 */
			getCSKu() {
				let s = this.product.attributes;
				let i = this.isAllChoise();
				let result = ''
				if (i == -1) {
					result = "已选择 "
					for (var j = 0; j < s.length; j++) {
						result += s[j].values[s[j].active].name + " "
					}
				} else {
					result = "请选着 "
					for (var j = 0; j < s.length; j++) {
						if (s[j].active == -1) {
							result += s[j].name + " "
						}
					}
				}
				this.cName = result
			},
			/**
			 * 是否每个规格都已经选中
			 */
			isAllChoise() {
				let s = this.product.attributes;
				for (var i = 0; i < s.length; i++) {
					if (s[i].active == -1) {
						return i;
					}
				}
				return -1;
			},
			/**
			 * 选择规格
			 * @param {Object} index
			 * @param {Object} index2
			 */
			choice(index, index2) {
				let s = this.product.attributes[index].values[index2].image
				if (s != null && s.trim() != "") {
					this.attrImage = s
				}
				this.product.attributes[index].active = index2
				this.getCSKu()
				let i = this.isAllChoise()
				if (i == -1) {
					let flag = this.getSku()
					if (flag == 1) {
						this.cName = "该商品不存在"
					}
					if (flag == 2) {
						this.cName = "该商品无库存"
					}

				}

			},
			getNumber(data) {
				this.count = data
			},
			skuHidden() {
				this.visiable = false
			},
			skuShow(type) {
				this.visiable = true
				this.type = type
			},

			/**
			 *获取商品所有规格 
			 */
			getSkuIntro() {
				var array = this.product.attributes;
				var s = ''
				for (var i = 0; i < array.length; i++) {
					s += array[i].name + "  "
				}
				this.skuIntro = s
			},
			/**所有
			 * 获取商品参数
			 */
			getParamIntro() {
				var array = this.product.productParams;
				var s = ''
				for (var i = 0; i < array.length; i++) {
					s += array[i].param + "  "
				}
				this.paramIntro = s
			},
			/**
			 * 获取数据
			 */
			getDetail() {
				var that = this
				getWithParam_(api.PRODUCT_DETAIL, {
					id: this.productId
				}).then(res => {
					that.getCount()
					that.product = res.data
					that.attrPrice = res.data.price
					that.attrMarketPrice = res.data.marketPrice
					that.attrStock = res.data.stock
					that.attrImage = res.data.mainImage
					that.getCSKu()
					//商品详情,将图片添加一个class,设置图片大小
					var s = res.data.detail.replace(/\<img/gi, '<img class="rich-img" ');
					//转换为节点
					that.detail = parseHtml(s)

					that.getParamIntro()

					that.getSkuIntro()

					that.getBannerIndex({
						detail: {
							current: 0
						}
					})

					getWithParam_(api.COMMENT_PRODUCT, {
						productId: this.productId
					}).then(resp => {
						that.comment = resp.data
					})

					that.load = true
				})


			}
		}
	}
</script>

<style>
	.comment-view {
		flex-direction: column;
		margin-top: 20upx;
		padding: 30upx 20upx;
		background-color: #FFFFFF;
	}

	.number_box_view {
		align-items: center;
		justify-content: space-between;
		height: 120upx;
		border-top: 1px solid #F2F3F5;
		margin-top: 30upx;
	}

	.product_param_sure_button {
		background-image: linear-gradient(to right, #FF0033, #FF6666);
		margin: 15upx 0;
		height: 80upx;
		border-radius: 80upx;
		color: #FFFFFF;
	}

	.product_param_value {
		width: 400upx;
		color: #888888;
		margin-left: 30upx;
	}

	.product_param_name {
		width: 200upx;
		color: #555555;
		margin-left: 20upx;
	}

	.product_param_item {
		height: 80upx;
		align-items: center;
		border-bottom: 3upx solid #F2F3F5;
	}

	.product_param_title {
		height: 100upx;
		color: #333333;
	}

	.product_param_view_ {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		flex-direction: column;
		padding: 0 30upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		z-index: 2000;
		width: 750upx;
		transition: all 0.3s ease;
		transform: translateY(0);
	}

	.product_param_view {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		flex-direction: column;
		padding: 0 30upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		z-index: 2000;
		width: 750upx;
		transition: all 0.3s ease;
		transform: translateY(100%);
	}

	.sku_sure_1 {
		color: #FFFFFF;
		align-items: center;
		justify-content: center;
		height: 80upx;
		width: 95%;
		border-radius: 80upx;
		background-image: linear-gradient(to right, #FF0033, #FF6666);
	}

	.sku_sure {
		width: 100%;
		height: 120upx;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border-top: 1px solid #F2F3F5;
	}

	.text8 {
		color: #808080;
		background-color: #F5F5F5;
		padding: 0 10upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sku_view_4_value_ {
		padding: 20upx 40upx;
		background-color: #faeded;
		border: 3upx solid #FE0036;
		box-sizing: border-box;
		margin: 15upx 15upx;
		color: #FE0036;
		border-radius: 10upx;
		font-size: 24upx;
	}

	.sku_view_4_value {
		padding: 20upx 40upx;
		background-color: #F2F3F5;
		border: 3upx solid #F2F3F5;
		box-sizing: border-box;
		margin: 15upx 15upx;
		color: #555555;
		border-radius: 10upx;
		font-size: 24upx;
	}

	.sku_view_5 {
		flex-direction: column;
	}

	.sku_view_2 {
		position: absolute;
		right: 20upx;
		top: 10upx;
	}


	.sku_view_ {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		background-color: #FFFFFF;
		flex-direction: column;
		padding: 30upx 30upx 0 30upx;
		box-sizing: border-box;
		z-index: 150;
		transition: all 0.3s ease;
		transform: translateY(0);
	}

	.sku_view {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		background-color: #FFFFFF;
		flex-direction: column;
		padding: 30upx 30upx 0 30upx;
		box-sizing: border-box;
		z-index: 150;
		transition: all 0.3s ease;
		transform: translateY(100%);
	}

	.label {
		position: absolute;
		background-color: #FF0000;
		color: #FFFFFF;
		left: 60upx;
		top: 10upx;
		width: 30upx;
		height: 30upx;
		align-items: center;
		justify-content: center;
		border-radius: 30upx;
	}

	.pro_buttom_1 {
		position: relative;
		z-index: 200;
		width: 15%;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.pro_buttom_2 {
		width: 48%;
		height: 90%;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		background-image: linear-gradient(to right, #F4A460, #FF8C00);
		color: #FFFFFF;
		border-top-left-radius: 50upx;
		border-bottom-left-radius: 50upx;
	}

	.pro_buttom_3 {
		width: 48%;
		height: 90%;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		background-image: linear-gradient(to right, #FF0033, #FF6666);
		color: #FFFFFF;
		border-top-right-radius: 50upx;
		border-bottom-right-radius: 50upx;
	}

	.pro_buttom {
		width: 750upx;
		height: 100upx;
		position: fixed;
		bottom: 0;
		border: 1px solid #EEEEEE;
		z-index: 100;
		align-items: center;
	}

	rich-text .rich-img {
		width: 100%;
		height: auto;

	}

	.pro_head_9 {
		margin-top: 20upx;
		flex-direction: column;
		background-color: #FFFFFF;
		padding-bottom: 100upx;
	}

	.text6 {
		color: #555555;
		font-size: 24upx;
		width: 70%;
	}

	.text5 {
		color: #808080;
		width: 30%;
		font-size: 24upx;
	}

	.pro_head_8 {
		background-color: #F5F5F5;
		margin: 0 20upx 15upx 20upx;
		padding: 20upx 20upx;
		box-sizing: border-box;
	}

	.text4 {
		color: #333333;
		font-size: 30upx;
		font-weight: 700;
		padding: 20upx 0;
	}

	.pro_head_7 {
		margin-top: 20upx;
		flex-direction: column;
		padding: 0 20upx;
		background-color: #FFFFFF;
	}

	.pro_head_6 {
		margin-top: 20upx;
		background-color: #FFFFFF;
		padding: 10upx 20upx;
		justify-content: space-between;
		align-items: center;
		height: 70upx;
	}

	.pro_head_5 {
		justify-content: space-between;
		padding-bottom: 20upx;
	}

	.text3 {
		margin-left: 20upx;
		color: #FE0036;
		align-items: center;
	}

	.text2 {
		color: #808080;
		font-size: 24upx;
		text-decoration: line-through;
	}

	.pro_head_4 {
		padding: 10upx 0;
		align-items: flex-end;
	}

	.text {
		margin-top: 10upx;
		color: #555555;
		font-size: 20upx;
	}

	.icon {
		width: 45upx;
		height: 45upx;
	}

	.pro_head_3 {
		flex-direction: column;
		position: relative;
	}

	.pro_head_2 {
		color: #333;
		font-weight: 700;
		font-size: 30upx;
		width: 80%;
		line-height: 40upx;
	}

	.pro_head_1 {
		max-height: 150upx;
		justify-content: space-between;
	}

	.pro_head {
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 30upx 20upx 0 20upx;
		box-sizing: border-box;
	}

	.content {
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.content_ {
		flex-direction: column;
		background-color: #f8f8f8;
		position: fixed;
		width: 750upx;
	}

	swiper {
		width: 100%;
		height: 750upx;
	}

	.banner {
		width: 750upx;
		height: 750upx;
	}

	.kf {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);

	}

	.kf:after {
		border: none;
	}

	.banner_num {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
		right: 30upx;
		bottom: 20upx;
		color: #FFFFFF;
		font-size: 24upx;
		padding: 5upx 30upx;
		border-radius: 30upx;
	}
</style>
